:ROOT {
    --winMarX: 300px;
    --winMaxWidth: 900px;
}

/* 手机端 */
@media (max-width: 500px) {
    :ROOT {
        --winMarX: 5px;
    }

    .sideMenu {
        margin: auto 1vh;
    }

    .swindow {
        left: 28vw;
        height: 75vh !important;
        width: calc(100vw - calc(calc(11vh + calc(var(--winMarX) * 2)) + 35px));
    }

    .travel-item {
        margin: 15px 0 !important;
    }

    .-camera-p-item {
        height: calc(60vh - 250px);
        min-height: 50vh;
    }
}

/*pad端*/
@media (min-width: 501px) and (max-width: 1366px) {
    .swindow {
        width: 65vw;
        left: 22vw;
    }

    .sideMenu {
        margin: auto 3vh;
    }

    .swindow.large {
        height: 75vh !important;
    }

    .swindow.small {
        height: 45vh !important;
    }

    .-camera-p-item {
        height: calc(100vh - 250px);
        max-height: 240px;
    }
}

/*pc端*/
@media (min-width: 1367px) {
    .sideMenu {
        margin: auto 5vh;
    }

    .swindow {
        left: 28vw;
        width: calc(100vw - calc(calc(11vh + calc(var(--winMarX) * 2)) + 35px));
    }

    .swindow.large {
        height: 75vh !important;
    }

    .swindow.small {
        height: 45vh !important;
    }

    .-camera-p-item {
        height: calc(100vh - 250px);
        max-height: 240px;
    }
}

/* dark 图片等调暗 */
body[data-theme="dark"] .page-cover,
body[data-theme="dark"] img,
body[data-theme="dark"] .-icon,
body[data-theme="dark"] .travel-item,
body[data-theme="dark"] .bg-image {
    filter: brightness(60%);
    /* backdrop-filter: brightness(60%); */
    /* background-blend-mode: darken; */
}

.page-cover {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
}

/* select */
select {
    padding: 5px;
    border-radius: 5px;
}

body[data-theme="light"] select {
    background-color: var(--lightGlass);
    border: var(--lightBorder);
    color: var(--lightText);
}

body[data-theme="dark"] select {
    background-color: var(--darkGlass);
    border: var(--darkBorder);
    color: var(--darkText);
}

/* .sideMenu */
.sideMenu {
    border-radius: var(--rads);
    height: auto;
    padding: 5px 0;
    backdrop-filter: var(--blur);
}

.sideMenu>.sideMenu-item {
    border: none !important;
    margin: 1vh;
    border-radius: 2ex;
    /* padding-bottom: calc(100% - 30px); */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(8vh);
    height: calc(8vh);
    transition: 400ms;
    cursor: pointer;
}


body[data-theme="light"] .sideMenu {
    background-color: var(--lightGlass);
    border: var(--lightBorder);
}

body[data-theme="light"] .sideMenu>.sideMenu-item:hover,
body[data-theme="light"] .sideMenu>.sideMenu-item.active {
    background-color: var(--lightGlass);
    border: solid 2px var(--lightBorder);
    box-shadow: var(--lightShadow);
}

body[data-theme="dark"] .sideMenu {
    background-color: var(--darkGlass);
    border: var(--darkBorder);
}

body[data-theme="dark"] .sideMenu>.sideMenu-item:hover,
body[data-theme="dark"] .sideMenu>.sideMenu-item.active {
    background-color: var(--darkGlass);
    border: solid 2px var(--darkBorder);
    box-shadow: var(--darkShadow);
}

body[data-theme="dark"] .sideMenu>.sideMenu-line {
    border-bottom: solid 2px var(--darkLine);
}

body[data-theme="light"] .sideMenu>.sideMenu-line {
    border-bottom: solid 2px var(--lightLine);
}

/*main-window*/
.swindow {
    padding: 10px;
    border-radius: 2ex;
    position: fixed;
    /* left: calc(calc(var(--winMarX) + 11vh) + 20px); */
    /* left: calc(50vw - calc(calc(100vw - calc(calc(11vh + calc(var(--winMarX) * 2)) + 35px)) / 2)); */
    backdrop-filter: var(--blur);
    z-index: 1;
    height: 45vh;
    top: 12.5vh;
    max-width: var(--winMaxWidth);
}

body[data-theme="dark"] .swindow {
    background-color: var(--darkGlass);
    border: var(--darkBorder);
}

body[data-theme="light"] .swindow {
    background-color: var(--lightGlass);
    border: var(--lightBorder);
}

.swindow .sw-header {
    display: flex;
    align-items: center;
}

.swindow .sw-header .-title {
    flex: 1;
    align-items: center;
    font-weight: bold;
    font-size: larger;
}

.swindow .sw-header .-close {
    transition: 400ms;
    padding: 2px;
    border-radius: 50px;
}

body[data-theme="dark"] .swindow .sw-header .-close:hover {
    background-color: var(--darkGlass);
}

body[data-theme="light"] .swindow .sw-header .-close:hover {
    background-color: var(--lightGlass);
}

#draggable {
    position: absolute;
}

#draggable:hover .sw-header {
    cursor: grab !important;
}

#draggable .sw-header .-close {
    cursor: default !important;
}

.cfgDetails {
    padding: 5px;
    /* background: lightgoldenrodyellow; */
    color: #455060;
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

/* post window */
.postWindow {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    padding: 10px;
    backdrop-filter: var(--blur);
}

.postWindow iframe {
    /* padding-top: 0 !important;
    padding-bottom: 0 !important; */
    /* height: calc(100% - 40px) !important;
    margin: 10px 10px 10px 10px;
    width: calc(100% - 20px) !important; */
}

body[data-theme="light"] .postWindow {
    background-color: var(--lightGlass);
}

body[data-theme="dark"] .postWindow {
    background-color: var(--darkGlass);
}

.postWindow>.postWindow-header {
    display: flex;
    align-items: center;
    border-radius: 100px;
    padding: 10px;
    margin: 10px;
}

body[data-theme="light"] .postWindow>.postWindow-header {
    background-color: var(--lightGlass);
}

body[data-theme="dark"] .postWindow>.postWindow-header {
    background-color: var(--darkGlass);
}

.postWindow>.postWindow-header>.-title {
    flex: 1;
}

.postWindow>.postWindow-body {
    height: calc(100% - 93px);
    margin: 20px 10px;
    border-radius: var(--rads);
    overflow: hidden;
}

.postBody {
    height: calc(calc(100vh - 70px) - calc(var(--rads) * 2));
    overflow-y: scroll;
    padding: 10px 25px;
}

video {
    max-width: 100%;
    /*display: block;*/
    /*margin:10px auto;*/
    border-radius: 1ex;
}

.postBody-before {
    display: block;
    height: calc(var(--rads) + 40px);
    border-top-left-radius: var(--rads);
    border-top-right-radius: var(--rads);
    padding-top: 10px;
    padding-bottom: 20px;
}

.postBody-after {
    display: block;
    height: var(--rads);
    border-bottom-left-radius: var(--rads);
    border-bottom-right-radius: var(--rads);
}

body[data-theme="light"] .postBody,
body[data-theme="light"] .postBody-before,
body[data-theme="light"] .postBody-after {
    background-color: var(--lightGlass);
}

body[data-theme="dark"] .postBody,
body[data-theme="dark"] .postBody-before,
body[data-theme="dark"] .postBody-after {
    background-color: var(--darkGlass);
}

.postBody-header {
    display: flex;
    align-self: center;
    position: sticky;
    top: 0;
    margin: 10px 20px 10px 20px;
    padding: 10px 20px;
    backdrop-filter: blur(10px);
    border-radius: var(--rads);
}

body[data-theme="light"] .postBody-header {
    background-color: var(--lightGlass);
}

body[data-theme="dark"] .postBody-header {
    background-color: var(--darkGlass);
}

.-archive-item {
    border-radius: var(--rads);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    /* height: calc(12vh - 2px); */
}

body[data-theme="dark"] .-archive-item {
    margin: 20px 10px;
    cursor: pointer;
    /*box-shadow: var(--darkShadow);*/
    /*background: var(--darkGlass);*/
}

body[data-theme="light"] .-archive-item {
    margin: 20px 10px;
    cursor: pointer;
    /*box-shadow: var(--lightShadow);*/
    /*background: var(--lightGlass);*/
}

.loading-overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
}

.loading-overlay>.inner {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(60px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    z-index: 999;
}

body[data-theme="light"] .loading-overlay {
    color: white;
}

body[data-theme="dark"] .loading-overlay {
    color: var(--darkText);
}

.loadingLogo {
    font-weight: bold;
    font-size: small;
    margin-top: 10px;
}

.time-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
}

.time-bar>*:first-child {
    margin-left: 10px;
}

.time-bar>*:last-child {
    margin-right: 10px;
}

/* body[data-theme="dark"] .time-bar {
    background-color: var(--darkGlass);
}

body[data-theme="light"] .time-bar {
    background-color: var(--lightGlass);
} */